<template>
  <div class="searchResult" v-if="resultList != []">
    <!-- 头部标签 -->
    <van-nav-bar
      title="搜索结果"
      class="search-title" fixed z-index="99"
      left-arrow
      @click-left="$router.back()"
    >
    </van-nav-bar>
    {{ $route.params.key }}
    <!-- 文章列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="--我是有底线的--"
      @load="onLoad"
    >
      <van-cell
      @click="toDetail(item)"
        class="item-cell"
        v-for="(item, index) in resultList"
        :key="index"
      >
        <template #title>
          <h3>{{ item.title }}</h3>
          <van-grid v-if="item.cover.type !== 0"
            :border="false"
            :column-num="3"
          >
            <van-grid-item
              v-for="(imgItem, imgIndex) in item.cover.images"
              :key="imgIndex"
            >
              <van-image :src="imgItem" lazy-load />
            </van-grid-item>
          </van-grid>
          <div class="box">
            <div class="left">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count}} 评论</span>
              <span>{{ item.pubdate | timeFilter }}</span>
            </div>
          </div>
          <!-- 宫格-内容横排 -->
          <van-grid direction="horizontal" :column-num="3">
            <van-grid-item icon="comment-o" @click.stop="commit" :text="item.comm_count.toString()">
            </van-grid-item>
            <van-grid-item icon="like" @click.stop="zan(index)" :text="item.like_count.toString()" />
            <van-grid-item icon="exchange" @click.stop="share" text="分享" />
          </van-grid>
        </template>
      </van-cell>
    </van-list>
    <!-- 分享面板 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
  </div>
</template>

<script>
// 获取搜索结果
import { getSearchResult } from '@/api/search.js'
// 对文章的操作
import { apiLikeArticle } from '@/api/article.js'

export default {
  data () {
    return {
      resultList: [],
      loading: false,
      finished: false,
      page: 1,
      perpage: 10,
      total: 0,
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' }
        ]
      ]
    }
  },
  methods: {
    // 上拉加载更多事件
    async onLoad () {
      const res = await getSearchResult({
        page: this.page,
        perpage: this.perpage,
        key: this.$route.params.key
      })
      console.log('搜索结果：', res)
      this.total = res.data.total_count
      this.resultList = [...this.resultList, ...res.data.results]
      this.loading = false
      this.page++
      if (this.total === this.resultList.length) {
        this.finished = true
      }
    },
    // 评论
    commit () {
      // 调用全局 判断登录的vue插件
      if (!this.$login()) {
        return
      }
      console.log('评论')
    },
    // 跳转至详情页
    toDetail (item) {
      this.$router.push(`/detail/${item.art_id}`)
    },
    // 点赞
    async zan (index) {
      console.log('点赞', index)
      await apiLikeArticle(this.resultList[index].art_id)
      this.resultList.like_count += 1
    },
    // 分享
    share () {
      console.log('分享')
      this.showShare = true
    }
  }
}
</script>

<style lang="less" scoped>
.searchResult {
  margin-top: 46px;

  .search-title {
    background-color: #3e9df8;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
  }

  /deep/ .van-nav-bar .van-icon {
    color: #fff;
  }

  .left{
    span{
      margin-right: 10px;
    }
  }
  h3{
    margin-bottom: 10px;
  }

  /deep/ .van-grid-item__icon{
    font-size: 22px;
  }
}
</style>
